<template>
    <div class='content'>

        <section>
            <div class="profile_page">
                    <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
            </div>
            <div>
                <van-cell-group class="searchInput">
                    <van-field
                        placeholder="请输入用户名"
                        right-icon="search"
                        @input="onSearch"
                        v-model="searchKey"
                    />
                </van-cell-group>
               <!-- <div class="contacts">
                    <tree :folder='itemTrees' :currentId='pid'></tree>
                </div>-->
              <ul class="contacts"  v-for="item in itemTrees" >
                <tree :data='item' :if-open="searchOpen"></tree>
              </ul>
            </div>
        </section>
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
    import tree from '@/components/tree/tree'
    import {getOrgTree,queryByData} from '@/service/getData'
    import {getStore,toTreeData,getDefault,toTreeSearchData} from '@/assets/config/mUtils'
    import { Dialog,Toast } from 'vant';
    export default {
    	data(){
            return{
                profiletitle:'通讯录',
                goBack:true,
                pid:'1',
                itemTrees:'',
                searchOpen:false,
                searchKey:''
            }
        },
        created(){
          Toast.loading({
            duration: 0,   // 持续展示 toast
            mask: true,
            message: '正在加载...'
          });
        },
        mounted(){
    	  var data = getDefault();
            getOrgTree(data).then(res =>{
              const itemTrees = res.data.itemTrees;
              this.itemTrees = toTreeData(itemTrees);
              Toast.clear();
//              console.log(this.itemTrees)
            })
        },
        props: ['imgSrc', 'menuTitle'],
        components:{
            headTop,
            tree
        },
        methods:{
          onSearch(){
            Toast.loading({
              duration: 0,   // 持续展示 toast
              mask: true,
              message: '正在加载...'
            });
            var data = {};
            data.data = this.searchKey;
            data.app_userId = getStore('user_id');
            data.CHECK_TIME = new Date().getTime();
            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            if(data.data == ""){
//              window.location.reload();
              var data = getDefault();
              this.searchOpen = false;
              getOrgTree(data).then(res =>{
//                this.itemTrees = '';
                const itemTrees = res.data.itemTrees;
                this.itemTrees = toTreeData(itemTrees);
//                console.log(this.itemTrees);
                Toast.clear();
              })
            }else {
              queryByData(data).then(res=>{
                this.itemTrees = '';
//                console.log(res.data);
                var result = JSON.parse(JSON.stringify(res.data));
                this.searchOpen = true;
                var appPersonVos = result.appPersonVos;
                var searchtree = result.itemTrees.concat(appPersonVos);
                var searchData = toTreeData(searchtree);
//                console.log(searchData);

                this.itemTrees = searchData;
                Toast.clear();
              })
            }

          }
        },

    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
      .searchInput{
          margin: .4rem;
          border-radius: .4rem;
          .van-cell{
               border-radius:.4rem;
          }

      }
  .contacts{
    //padding-left: 5%;
    overflow-x: hidden;
  }

</style>
